<template>
  <el-container class="flowChartWrap">
    <el-main>
      <el-container>
        <!-- FooderTree -->
        <div class="folder-tree">
          <a-menu
            mode="inline"
            :selectedKeys="selectedKeys"
            :open-keys="openKeys"
            style="width: 256px"
            :inlineIndent="15"
            @openChange="onOpenChange"
          >
            <a-sub-menu :key="folder.name" v-for="folder in folders">
              <!-- folder -->
              <span v-if="folder.type == 'folder'" slot="title">
                <a-icon v-if="folder.isOpen" type="folder-open" />
                <a-icon v-else type="folder" />

                <span class="title">{{ folder.name }}</span>
                <div class="actions">
                  <a-tooltip title="add planning">
                    <a-button
                      type="link"
                      class="editfnname"
                      @click.stop="addFiler(folder)"
                    >
                      <a-icon type="folder-add" />
                    </a-button>
                  </a-tooltip>
                </div>
              </span>
              <template v-for="(child, index) in folder.childs">
                <a-menu-item
                  :key="index + '_childs'"
                  class="ant-menu-submenu-title"
                  @click="editFile(child, index + '_childs')"
                >
                  <a-avatar class="avatar" :size="20" icon="file-text" />
                  {{ child.name + ".task" }}
                  <div class="actions" style="margin-right: -30px">
                    <a-tooltip title="delete this planning">
                      <a-button
                        type="link"
                        class="addfile"
                        @click.stop="
                          showDeleteConfirm(child, _childIndex, child)
                        "
                      >
                        <a-icon type="delete" />
                      </a-button>
                    </a-tooltip>
                  </div>
                </a-menu-item>
              </template>
            </a-sub-menu>
          </a-menu>
        </div>

        <el-main class="main">
          <a-spin :spinning="isLoading" class="add-wrap__edit">
            <div id="mainMenu">
              <div class="tool-left">
                <el-button
                  icon="el-icon-video-play"
                  @click="execModel"
                  :disabled="isExecDisable"
                  size="small"
                  >执行</el-button
                >
                <el-button
                  icon="el-icon-upload"
                  size="small"
                  @click="save"
                  :disabled="isUndoDisable"
                  >保存</el-button
                >
              </div>
              <div class="tool-right">
                <el-tooltip content="撤销">
                  <el-button
                    icon="el-icon-refresh-left"
                    :disabled="isUndoDisable"
                    @click="undo"
                    circle
                  ></el-button>
                </el-tooltip>
                <el-tooltip content="放大">
                  <el-button
                    icon="el-icon-zoom-in"
                    @click="zoomOut"
                    circle
                  ></el-button>
                </el-tooltip>
                <el-tooltip content="缩小">
                  <el-button
                    icon="el-icon-zoom-out"
                    @click="zoomIn"
                    circle
                  ></el-button>
                </el-tooltip>
                <!-- <el-tooltip content="自动布局">
                                  <el-button icon="el-icon-bangzhu"
                                             circle></el-button>
                                </el-tooltip> -->
                <!-- <el-tooltip content="适应画布">
                                  <el-button icon="el-icon-money"
                                             circle></el-button>
                                </el-tooltip> -->
                <el-tooltip content="全屏">
                  <el-button
                    icon="el-icon-full-screen"
                    circle
                    @click="startFullscreen"
                  ></el-button>
                </el-tooltip>
              </div>
            </div>
            <div
              class="mainContainer"
              @drop="dropHandle"
              @dragover="dragoverHandle"
            >
              <div id="mainContainer" @click="clickBgHandle"></div>
            </div>
            <el-dialog
              title="数据探查-（仅显示前100条）"
              :visible.sync="dialogTableVisible"
            >
              <el-table :data="gridData">
                <el-table-column
                  property="date"
                  label="日期"
                  width="150"
                ></el-table-column>
                <el-table-column
                  property="name"
                  label="姓名"
                  width="200"
                ></el-table-column>
                <el-table-column
                  property="address"
                  label="地址"
                ></el-table-column>
              </el-table>
              <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogTableVisible = false"
                  >复 制</el-button
                >
                <el-button @click="dialogTableVisible = false">取 消</el-button>
              </div>
            </el-dialog>
          </a-spin>
        </el-main>

        <el-aside width="260px" class="right" style="display:none">
          <el-container id="mainNodeInfo">
            <el-main>
              <div>
                <div v-show="toolBarShow === 'component'">
                  <!-- Poject Info -->
                  <div v-show="!isShowNode">
                    <div class="title">业务流程属性</div>
                    <div class="model-attr">
                      <p>
                        <span class="item">项目名称</span>
                        <span class="value">{{ ProjectName }}</span>
                      </p>
                      <p>
                        <span class="item">名称</span>
                        <el-input size="small" v-model="ProjectName"></el-input>
                      </p>
                      <p>
                        <span class="item">描述</span>
                        <el-input
                          type="textarea"
                          size="small"
                          v-model="ProjectDescription"
                        ></el-input>
                      </p>
                    </div>
                  </div>
                  <div v-show="isShowNode">
                    <div class="title">节点属性</div>
                    <!-- Line Form -->
                    <div class="node-attr" v-if="currentLine.havLine">
                      <p>
                        <span class="item">条件</span>
                        <el-input
                          size="small"
                          placeholder="$resut=='xxx'"
                          v-model="modelValue"
                        ></el-input>
                      </p>
                      <p>
                        <span class="item">描述</span>
                        <el-input
                          type="textarea"
                          size="small"
                          v-model="modelDescription"
                        ></el-input>
                      </p>
                      <p>
                        <el-button
                          type="primary"
                          size="mini"
                          icon="el-icon-check"
                          @click="savenodeform"
                          >保存</el-button
                        >
                      </p>
                    </div>
                    <!-- Node Form -->
                    <div class="node-attr" v-else>
                      <p>
                        <span class="item">选择函数</span>
                        <el-input size="small" v-model="modelName"></el-input>
                      </p>
                      <p>
                        <span class="item">执行参数</span>
                        <el-input
                          type="textarea"
                          size="small"
                          v-model="modelParameter"
                          placeholder="[$result.orderKey,'addorder',...]"
                        ></el-input>
                      </p>
                      <p>
                        <span class="item">成功的条件</span>
                        <el-input
                          size="small"
                          v-model="modelValue"
                          placeholder="$result.code == 200"
                        ></el-input>
                      </p>
                      <p>
                        <span class="item">描述</span>
                        <el-input
                          type="textarea"
                          size="small"
                          v-model="modelDescription"
                        ></el-input>
                      </p>
                      <p>
                        <el-button
                          type="primary"
                          size="mini"
                          icon="el-icon-check"
                          @click="savenodeform"
                          >保存</el-button
                        >
                      </p>
                    </div>
                  </div>
                </div>
                <div v-show="toolBarShow === 'message'">
                  <div class="title">消息管理</div>
                  <div>
                    <el-card
                      class="messageInfo"
                      v-for="(m, idx) in messagesList"
                      :key="idx"
                    >
                      <p>{{ m.time }}</p>
                      <div>
                        <i
                          class="el-icon-circle-close"
                          style="
                                            color: red;
                                            font-size: 26px;
                                            position: relative;
                                            top: 5px;
                                          "
                        ></i>
                        {{ m.message }}
                      </div>
                    </el-card>
                  </div>
                </div>
              </div>
            </el-main>
            <el-aside width="32px" class="nodeInfoToolBar">
              <div
                :class="{
                  tool: true,
                  component: true,
                  acitve: toolBarShow === 'component'
                }"
                @click="toolBarShow = 'component'"
              >
                <i class="el-icon-tickets"></i>
                <span> {{ isShowNode ? "节点" : "项目" }}参数</span>
              </div>
              <div
                :class="{
                  tool: true,
                  message: true,
                  acitve: toolBarShow === 'message'
                }"
                @click="toolBarShow = 'message'"
              >
                <i class="el-icon-chat-dot-round"></i>
                <span> 消息提醒</span>
              </div>
            </el-aside>
          </el-container>
        </el-aside>
      </el-container>
    </el-main>
  </el-container>
</template>
<script>
import FlowChart from "../../FlowChart/index";
import FooderTree from "@/components/foldertree.vue";
import Addmodule from "@/components/addmodule.vue";
import { fullScreen } from "@/utils/index.js";

export default {
  components: {
    FooderTree,
    Addmodule
  },

  data() {
    return {
      fullscreenEl: null,
      taskList: [],
      isShowNode: false,
      isLoading: false,
      currentNodeId: "",
      childname: "",
      selectFiled: "",
      openKeys: ["Plannings"],
      rootSubmenuKeys: ["rootSubmenuKeys"],
      selectedKeys: ["Plannings"],
      selectedChild: null,
      folders: [
        {
          name: "Plannings",
          type: "folder",
          isOpen: true,
          childs: []
        }
      ],
      currentLine: {
        havLine: false,
        data: { condition: "", description: "" },
        setLabel(v) {
          console.log(v);
        },
        canvas: {
          classList: {
            add(v) {
              console.log(v);
            },
            remove(v) {
              console.log(v);
            }
          }
        }
      },
      currentNode: {
        havNode: false,
        data: {
          functionModule: "",
          condition: "",
          parameter: "",
          description: ""
        }
      },
      isUndoDisable: true,
      isExecDisable: false,
      defaultProps: {
        children: "children",
        label: "label"
      },
      activeName: "first",
      toolBarShow: "component",

      ProjectName: "",
      ProjectDescription: "",

      modelName: "",
      modelValue: "",
      modelParameter: "",
      modelDescription: "",

      gridData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        }
      ],
      dialogTableVisible: false,
      messagesList: [
        {
          time: "2019/6/5 下午3:17:29",
          message: "当前实验中没有可回滚的节点"
        },
        {
          time: "2019/6/5 下午3:00:25",
          message: "模型不存在,请生成模型后重试"
        },
        {
          time: "2019/6/5 下午3:00:17",
          message: "实验目录不存在"
        },
        {
          time: "2019/6/5 下午3:00:09",
          message: "模型不存在,请生成模型后重试"
        }
      ],

      iniDemoData: {
        nodes: [],
        endpoints: [],
        edges: [],
        edgesdata: {},
        projectName: "",
        projectDescription: ""
      }
    };
  },
  mounted() {
    // FlowChart.getData()
    // this.currentLine.setLabel({
    //     label: "test1"
    //   });

    this.fullscreenEl = document.getElementsByClassName("layout-content")[0];

    this.keyCodeForEvent();

    // 选择节点
    FlowChart.on("selectNode", nodeId => {
      this.clickBgHandle();
      // 获取数据
      var data = FlowChart.getDataByNodeId(nodeId);
      this.currentNode.havNode = true;
      this.currentNode.data = data;
      this.modelName = data.functionModule;
      this.modelValue = data.condition;
      this.modelParameter = data.parameter;
      this.modelDescription = data.description;
      this.isShowNode = true;
      this.currentNodeId = nodeId;
    });

    // 点击线条
    FlowChart.on("clickLine", (conn, key, data) => {
      // console.log("clickLine", key);
      this.isShowNode = true;
      this.currentLine = conn;
      this.currentLine.havLine = true;
      this.currentLine.data = data;
      this.modelValue = data.condition;
      this.modelDescription = data.description;
      this.currentLine.canvas.classList.add("active");
    });

    FlowChart.setContainer("mainContainer");
    FlowChart.on("commandListEmpty", () => {
      this.isUndoDisable = true;
    });
    FlowChart.on("showNodeData", nodeId => {
      this.dialogTableVisible = true;
      console.log("showNodeData", nodeId);
    });
    FlowChart.on("addCommand", () => {
      this.isUndoDisable = false;
    });
    {
      // 进入界面 获取目录
      // 点击一个具体的目录，  调用  GetItem 获取 画布内容
      // FlowChart.loadData(result.data);     切换/初始化 画布内容
      // 编辑之后调用 Modify   ； var data = FlowChart.getData(); 获取当前画布内容
    }
    // 初始化数据
    FlowChart.loadData(this.iniDemoData);

    this.$cloud
      .command("iTool Planning GetList", "")
      .then(res => {
        console.log("Planning GetList", res);
        console.log("this.folders", this.folders);
        for (let index = 0; index < res.length; index++) {
          this.folders[0].childs.push({
            name: res[index],
            type: "js"
          });
        }
        if (res.length > 0) {
          this.editFile(this.folders[0].childs[0], "0_childs");
        }
      })
      .catch(error => {
        console.error("Planning GetList", error);
      });
  },

  methods: {
    startFullscreen() {
      fullScreen.activate(this.fullscreenEl);
    },
    addFiler(folder) {
      this.selectedChild = folder;
      const h = this.$createElement;
      const content = h(Addmodule);
      this.$info({
        title: "",
        icon: () => h(""),
        content,
        footer: null,
        onOk: () => {
          const data = content.child.$data;
          this.handleOk({
            modalInput: data.modalInput,
            selectedChildType: data.selectedChildType
          });
        },
        onCancel: () => {}
      });
    },
    onOpenChange(openKeys) {
      for (let index = 0; index < this.folders.length; index++) {
        const element = this.folders[index];
        element.isOpen = openKeys.indexOf(element.name) > -1;
        for (let index2 = 0; index2 < element.childs.length; index2++) {
          const element2 = element.childs[index2];
          element2.isOpen = openKeys.indexOf(element2.name) > -1;
        }
      }

      const latestOpenKey = openKeys.find(
        key => this.openKeys.indexOf(key) === -1
      );
      if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
        this.openKeys = openKeys;
      } else {
        this.openKeys = latestOpenKey ? [latestOpenKey] : [];
      }
    },
    showDeleteConfirm(child) {
      var that = this;
      this.$confirm({
        title: `Are you sure delete this planning?`,
        content: "删除后将从目录列表中移除",
        okText: "Yes",
        okType: "danger",
        cancelText: "No",
        onOk() {
          that.deleteItem(child.name);
        },
        onCancel() {}
      });
    },
    deleteItem: function(name) {
      this.$cloud
        .command("iTool Planning Remove", name)
        .then(res => {
          console.error("Planning Remove", res);
          if (res - 0 > 0) {
            for (
              let index = 0;
              index < this.folders[0].childs.length;
              index++
            ) {
              const element = this.folders[0].childs[index];
              if (element.name == name) {
                this.folders[0].childs.splice(index, 1);
              }
            }
            //重新加载
            FlowChart.loadData(this.iniDemoData);
            this.$message.success("已成功删除" + name + "任务");
          } else {
            this.$message.error("参数验证不通过，请检查后重试");
          }
        })
        .catch(error => {
          console.error("任务" + name + "删除失败", error);
        });
    },
    addFile(child) {
      this.$emit("addfile", child);
    },
    handleOk: function(obj) {
      if (!obj.modalInput) {
        this.$message.error("请输入名称");
        return;
      } else if (obj.modalInput == "Plannings") {
        this.$message.error("不可使用保留名称 Plannings");
        return;
      }
      var parent =
        this.selectedChild.name == "Plannings"
          ? this.folders[0]
          : this.selectedChild;
      var filter = parent.childs.filter(
        item => item.name.toUpperCase() == obj.modalInput.toUpperCase()
      );
      if (filter.length > 0) {
        if (!obj.isBroadcast) {
          this.$message.error("名称已存在");
        }
        return;
      }
      var node = null;

      if (obj.selectedChildType == "folder") {
        node = {
          name: obj.modalInput,
          type: obj.selectedChildType,
          modulePath: parent.name + "/" + obj.modalInput,
          isOpen: true,
          childs: []
        };
        this.selectedChild.childs.push(node);

        var nods = JSON.stringify(this.iniDemoData);

        //nods=null;
        this.$cloud
          .command("iTool Planning Add", {
            Key: obj.modalInput,
            value: nods
          })
          .then(res => {
            if (res - 0 > 0) {
              this.$message.success("添加成功");
            } else {
              this.$message.error("参数验证不通过，请检查后重试");
            }
          })
          .catch(error => {
            console.error("iTool Planning Add", error);
            this.$message.error("添加异常，请联系管理员");
          });
        this.childname = obj.modalInput;
        let key = this.selectedChild.childs.length - 1 + "_childs";
        if (this.selectedKeys.length == 1) {
          this.selectedKeys.push(key);
        } else {
          this.selectedKeys[1] = key;
        }
        return;
      }
    },
    editFile(file, key) {
      console.log(file, key);
      if (this.selectedKeys.length == 1) {
        this.selectedKeys.push(key);
      } else {
        this.selectedKeys[1] = key;
      }
      this.isLoading = true;
      this.childname = file.name;
      this.$cloud
        .command("iTool Planning GetItem", file.name)
        .then(res => {
          this.isLoading = false;
          console.log("Planning GetItem", res);
          if (res) {
            var values = JSON.parse(res.Value);
            FlowChart.loadData(values);
          }
        })
        .catch(error => {
          this.isLoading = false;
          console.error("Planning GetList", error);
        });
    },
    save() {
      var data = FlowChart.getData();
      data.projectName = this.ProjectName;
      data.projectDescription = this.ProjectDescription;
      this.clickBgHandle();
      console.log("data", data);
      var nodes = JSON.stringify(data);
      var parameter = { Key: this.childname, value: nodes };
      this.$cloud
        .command("iTool Planning Modify", JSON.stringify(parameter))
        .then(res => {
          if (res - 0 > 0) {
            this.$message.success("保存成功");
          } else {
            this.$message.error("参数验证不通过，请检查后重试");
          }
        })
        .catch(err => {
          this.$message.error(err);
        });
    },
    clearmodel() {
      this.modelName = "";
      this.modelValue = "";
      this.modelParameter = "";
      this.modelDescription = "";
    },
    savenodeform() {
      if (this.currentLine.havLine) {
        this.currentLine.setLabel({
          label: this.modelValue
        });
        this.currentLine.data.condition = this.modelValue;
        this.currentLine.data.description = this.modelDescription;
      } else if (this.currentNode.havNode) {
        this.currentNode.data.functionModule = this.modelName;
        this.currentNode.data.condition = this.modelValue;
        this.currentNode.data.description = this.modelDescription;
        this.currentNode.data.parameter = this.modelParameter;
      }
      this.clearmodel();
      this.clickBgHandle();
    },

    dragoverHandle(ev) {
      ev.preventDefault();
    },
    dragHandle(ev) {
      ev.dataTransfer.setData("target-id", ev.target.id);
      ev.dataTransfer.setData("target-type", ev.target.getAttribute("type"));
    },
    dropHandle(ev) {
      FlowChart.addNode(
        { pageX: ev.pageX, pageY: ev.pageY },
        ev.dataTransfer.getData("target-id"),
        ev.dataTransfer.getData("target-type")
      );
    },
    clickBgHandle() {
      this.isShowNode = false;
      if (this.currentLine.havLine) {
        this.currentLine.canvas.classList.remove("active");
        this.currentLine.havLine = false;
      }

      if (this.currentNode.havNode) {
        this.currentNode.havNode = false;
      }
    },
    zoomOut() {
      FlowChart.zoomOut();
    },
    zoomIn() {
      FlowChart.zoomIn();
    },
    undo() {
      FlowChart.undo();
    },
    execModel() {
      this.isExecDisable = true;
      this.clickBgHandle();
      this.execEvent();
    },
    execEvent() {
      var data = FlowChart.getData();
      console.log("getData", data);

      for (let index = 0; index < data.nodes.length; index++) {
        const node = data.nodes[index];
        FlowChart.changeStateByNodeId(node.id, "none");
      }

      let fristnode = this.getFristNode(data);

      return this.invokeNode(fristnode);
    },

    // 执行节点
    invokeNode(node, lines) {
      console.log("invoke node", node);
      let that = this;
      // 添加任务
      this.taskList.push(node.id);
      setTimeout(FlowChart.changeStateByNodeId(node.id, "loading"), 1);
      if (lines) {
        FlowChart.blingConnectors(lines);
      }

      return new Promise((resolve, reject) => {
        setTimeout(
          function() {
            var result = true;

            // 移除任务
            that.taskList.splice(that.taskList.indexOf(node.id), 1);

            if (result) {
              FlowChart.changeStateByNodeId(node.id, "success");
              that.getNextNodesAndInvoke(node, { code: 200 });
              resolve();
              // that.invokeNode(nextNode);
            } else {
              FlowChart.changeStateByNodeId(node.id, "failed");
              reject();
            }
          }.bind(this),
          1000
        );
      });
    },

    getNextNodesAndInvoke(node, result) {
      var resultNodes = this.getNextNodes(node, result);

      if (resultNodes.length == 0) {
        // this.isExecDisable = false;
        // FlowChart.blingConnectors([]);

        if (this.taskList.length == 0) {
          this.isExecDisable = false;
          FlowChart.blingConnectors([]);
        }
        return;
      }

      let lines = resultNodes.map(item => {
        return item.line;
      });

      console.log(",lines", lines, resultNodes);

      for (let index = 0; index < resultNodes.length; index++) {
        const node = resultNodes[index];
        this.invokeNode(node, lines);
      }
    },

    // 获取开始节点
    // 如何查找开始节点： 遍历Nodes, 获取 points.targets 然后 到 edges 做对比。 查找是否有线连接到它，  没有则是开始节点
    //  1. 获取节点数据： data.parameter
    getFristNode(data) {
      for (let index = 0; index < data.nodes.length; index++) {
        const element = data.nodes[index];

        // console.log("getFristNode", element);

        var compareArray = element.points.targets;
        for (let edgeIndex = 0; edgeIndex < compareArray.length; edgeIndex++) {
          const compareElement = compareArray[edgeIndex];
          // 查找是否有线连接到它，
          if (
            data.edges.filter(edge => edge.indexOf("&&" + compareElement) > -1)
              .length == 0
          ) {
            if (edgeIndex == compareArray.length - 1) {
              // 这是第一个节点
              return element;
            }
          } else {
            // 有线连接到它直接下一个循环
            break;
          }
        }
      }
    },

    // 获取下一个节点
    // 查找当前节点的（连接线和下一个节点），
    //  1. 获取当前节点sources， points.sources[0]
    //  2. 连接线：匹配到 edges以points.sources[0]+"&&" 开头的线
    //  3. 获取线的数据， 上一步获取连接线 lines. edgesdata[lines[index]]
    //  4. 根据线获取目标节点, 先获取 targetid, 在遍历nodes > points.targets包含的第一个 为当前节点目标
    getNextNodes(node, result) {
      let data = FlowChart.getData();
      console.log("getNextNodes", node, result);

      // 符合条件的线,所有符合条件的节点
      let resultLines = [],
        resultNodes = [];

      let source = node.points.sources[0] + "&&";
      // 所有的线
      let lines = data.edges.filter(edge => edge.indexOf(source) > -1);

      console.log("所有的线", lines);

      for (let lineIndex = 0; lineIndex < lines.length; lineIndex++) {
        const lineElement = lines[lineIndex];
        // 获取线的数据
        if (data.edgesdata[lineElement].condition) {
          var _test = false;
          eval(
            "var $result=" +
              JSON.stringify(result) +
              ";_test=" +
              data.edgesdata[lineElement].condition +
              ";"
          );
          if (_test) {
            resultLines.push(lineElement);
          }
        } else {
          resultLines.push(lineElement);
        }
      }

      console.log("符合条件的线", resultLines);

      // 先获取 target
      var targets = resultLines.map(item => {
        return {
          target: item.split("&&")[1],
          line: item
        };
      });

      console.log("所有符合条件的节点", targets);

      // 将所有的target对应的Node装载在resultNodes
      for (let targetIndex = 0; targetIndex < targets.length; targetIndex++) {
        const item = targets[targetIndex];
        let filterResult = data.nodes.filter(
          nodeItem => nodeItem.points.targets.indexOf(item.target) > -1
        )[0];
        filterResult.line = item.line;
        resultNodes.push(filterResult);
      }

      console.error(
        "所有符合条件的节点",
        resultNodes.map(item => item.data.value)
      );

      return resultNodes;
    },

    keyCodeForEvent() {
      let that = this;
      let code = 0;
      let code2 = 0;
      document.onkeydown = function(e) {
        let evn = e || event;
        let key = evn.keyCode || evn.which || evn.charCode;

        if (key === 17) {
          code = 1;
        }
        if (key === 90) {
          code2 = 1;
        }

        if (code === 1 && code2 === 1 && !that.isUndoDisable) {
          //do something
          code = 0;
          code2 = 0;
          that.undo.bind(this)();
        }
      };
      document.onkeyup = function(e) {
        if (e.keyCode === 17) {
          code = 0;
        }
        if (e.keyCode === 13) {
          code2 = 0;
        }
      };
    },

    timeout(fn, time) {
      return new Promise(res => {
        setTimeout(() => {
          fn();
          res(true);
        }, time);
      });
    }
  }
};
</script>

<style lang="less">
html {
  height: 100%;
  body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
  }
  .wrap {
    height: 100%;

    .fy_el-header {
      background: #212528;
      color: #fff;
      z-index: 1000;
      font-size: 14px;
      line-height: 50px;
      padding-left: 5px;
      img {
        height: 36px;
        position: relative;
        top: 4px;
      }
      span.logoFont {
        font-size: 16px;
        margin-left: 20px;
        position: relative;
        top: -9px;
        margin-right: 100px;
      }
      .navItem {
        color: #fff;
        display: inline-block;
        height: 42px;
        line-height: 42px;
        padding: 0 20px;
        position: relative;
        top: -10px;
        text-decoration: none;
        &.active {
          background: hsla(0, 0%, 100%, 0.2);
        }
      }
      .el-dropdown {
        float: right;
        height: 42px;
        .el-dropdown-link {
          color: #fff;
        }
      }
    }

    .my-app-container {
      height: calc(100% - 42px);
    }
  }
}

.el-main {
  padding: 0px;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.06);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.08);
}

/* 滚动条滑块 */

::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.12);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
}

.el-button--small,
.el-button--small.is-round {
  padding: 9px 15px;
}

.flowChartWrap {
  height: 100%;
  .left {
    border-right: 1px solid #e5e5e5;
    height: 100%;
    .el-tree {
      height: calc(100% - 40px);
      overflow-y: auto;
    }
  }
  .right {
    border-left: 1px solid #e5e5e5;
  }
  .main {
    #mainMenu {
      height: 41px;
      border-bottom: 1px solid #e1e1e1;
      .tool-left {
        float: left;
        .el-button {
          &:first-child {
            margin-left: 10px;
          }
          border: none;
          margin-top: 8px;
        }
      }
      .tool-right {
        float: right;
        .el-button {
          position: relative;
          border: none;
          margin: 3px 0 0 0;
          &:last-child {
            margin-right: 10px;
          }
          background: transparent;
        }
      }
    }
    .mainContainer {
      height: calc(100% - 42px);
      width: 100%;
      position: relative;
      overflow: hidden;
      outline: none !important;
      #mainContainer {
        outline: none !important;
        height: 100%;
        width: 100%;
        position: relative;
      }
    }
  }
  #mainNodeInfo {
    .nodeInfoToolBar {
      border-left: 1px solid #e5e5e5;
      overflow: hidden;
      .tool {
        padding: 8px 0;
        writing-mode: vertical-rl;
        line-height: 32px;
        font-size: 12px;
        border-bottom: 1px solid #ccc;
        cursor: pointer;
        &.acitve {
          font-weight: bold;
          color: #289de9;
        }
        span {
          margin: 5px 0;
        }
      }
    }
    .title {
      border-bottom: 1px solid #e5e5e5;
      height: 41px;
      font-size: 12px; // color: #999;
      line-height: 40px;
      text-align: center;
    }
    .model-attr {
      padding: 10px;
      .item {
        font-size: 12px;
      }
      .value {
        font-size: 12px;
        color: #999;
        margin-left: 10px;
      }
      .el-input {
        margin-top: 5px;
      }
      textarea {
        margin-top: 5px;
        font-family: inherit;
      }
    }
    .node-attr {
      padding: 10px;
      .item {
        font-size: 12px;
      }
      .value {
        font-size: 12px;
        color: #999;
        margin-left: 10px;
      }
    }
    .messageInfo {
      padding: 0px;
      margin: 10px;
      color: #333;
      font-size: 14px;
      .el-card__body {
        padding: 10px;
      }
      p {
        padding: 0;
        margin: 0;
        font-size: 12px;
      }
    }
  }
  .el-aside {
    background: #f8f8f8;
    .search {
      height: 40px;
      background-color: #f3f3f3;
      padding: 8px 12px;
      box-sizing: border-box;
      border-bottom: 1px solid #e5e5e5;
      .el-input {
        height: 24px;
        .el-input__inner {
          height: 24px;
        }
      }
      .el-input--small .el-input__icon {
        line-height: 24px;
      }
    }
    .el-tree {
      background: transparent;
    }
  }
  .el-container {
    height: 100%;
  }
  .tabsNav {
    padding: 0;
    .el-tabs--card > .el-tabs__header .el-tabs__nav {
      border-top: 3px solid #01c1de;
      border-radius: 0;
    }
    .el-tabs__item.is-active {
      color: #333 !important;
    }
    .el-tabs__item {
      font-size: 12px;
    }
    .el-tabs__item:focus.is-active.is-focus:not(:active) {
      box-shadow: none !important;
    }
  }
  .el-tree-node__content,
  .el-tree-node {
    min-height: 38px !important;
  }
  .leafNode {
    .node::before {
      content: "";
      position: absolute;
      top: 2px;
      left: 3px;
      border-radius: 2px;
      padding: 13px 2px;
      background: transparent;
    }
    &:hover span.node {
      border: 1px solid #1c9bec !important;
      background: #fff;
      &::before {
        background: #1c9bec;
      }
    }
  }
}

.avatar {
  margin: -2px 3px 0 0px;
}

.user-avatar {
  background-color: #87d068;
}

.folder-tree {
  .title {
    font-size: 16px;
  }
  .ant-avatar {
    .anticon {
      margin-right: 0px;
      font-size: 12px;
    }
  }
  .ant-menu-submenu-title {
    // background-color: #e5e5e5;
    // background: #eee;
    margin: 0;
    .actions {
      display: none;
      float: right;
      .ant-btn {
        padding: 0;
        border: none;
      }
    }
    &:hover {
      .actions {
        display: block;
      }
    }
  }
  .ant-menu-item {
    margin: 0;
  }
}

.folder-tree .ant-avatar .anticon {
  margin-right: 0px;
  font-size: 12px;
}

.folder-tree .title {
  font-size: 16px;
}

.add-wrap__edit {
  height: 100%;
  .ant-spin-container {
    height: 100%;
  }
}
</style>
